{{define "artclassifylst"}}
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>{{.Title}}</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../static/layui/css/modules/code.css" />
        <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
        <link rel="stylesheet" href="../../static/iconfont.css" />
        <link rel="stylesheet" href="../../static/default/modal.css" />
        <link rel="stylesheet" href="../../static/articles/artlist.css" />
        <link rel="icon" href="../../static/images/favicon.ico"/>
        <link rel="stylesheet" type="text/css" href="../../static/assets/waifu1.css"/>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="../../static/layui/layui.js"></script>
        <script>
            $(document).ready(function(){
               
               $("body").ready(function(){
                   var w=parseInt(document.body.clientWidth)+"px";
                  $("#nav").css("width",w);
                  $("#main").css("width",w);
               });
                
               $(window).resize(function(){
                var w=parseInt(document.body.clientWidth)+"px";
                  $("#nav").css("width",w);
                  $("#main").css("width",w);
               });
              
            });
       </script>
    </head>
    <body>
        {{template "navigate"}}
        <div id="main">
            <div id="sreach">
                <div id="left">
                  <input type="text" id="sreachtxt"name="title" lay-verify="title" autocomplete="off" placeholder="请输入文章名关键字" class="layui-input">
                  
                </div>
                <div id="right">
                  <button id="sreach-btn" type="button" class="layui-btn">搜索一下</button>
                </div>
            </div>
            <div style="clear: both;"></div>
            <div id="artcontiner">
              {{range.List}}
              <div class="m_continer">
                <div class="w_title">
                <a href="/article/detail?artid={{.ID}}">{{.Name}}</a>
                </div>
                <div class="w_tags">                                                       
                <span>作者：{{.Author}}</span>
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                <span>分类：{{.Classify}}</span>
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                <span>标签：{{.Tag}}</span>
                &nbsp;
                &nbsp;
                &nbsp;
                &nbsp;
                <span>日期：{{.CreateTime}}</span>
                </div>
                <div class="w_content">
                <span>
                    {{.Content}}
                </span>
                </div>
                <div class="w_footer">
                    <!--<a>评论(0)</a>-->
                    
                    <a href="/article/detail?artid={{.ID}}">开始阅读</a>
                </div>
              </div>
              {{end}}
            </div>
            <!--看板娘-->
            <div>
              {{template "kanbanniang"}}
            </div>
            <div id="pagercontent">
              <div id="pager"></div>
          </div>
        </div>
        
    </body>
    <footer>
        {{template "footer"}}
    </footer>
    <script>
        layui.use(['element','laypage','layer'],function(){
            var element = layui.element;
             //分页控件
            var laypage = layui.laypage;
            //弹出层
            var layer=layui.layer;
            //执行一个laypage实例
            laypage.render({
              elem: 'pager' 
              ,count:'{{.ArtCount}}' //数据总数，从服务端得到
              ,limit:'{{.PageSize}}'
              ,jump: function(obj, first){
                  //首次不执行
                if(!first){
                  //do something
                  var urlstr='/article/artclassifylstpage?index='+obj.curr+'&classify={{.Param.Classify}}&tag={{.Param.Tag}}&name={{.Param.Name}}';
                  var loading = layer.msg('加载中...', {icon: 16, shade: 0.3, time:0});
                  $.ajax({
                      url:urlstr,
                      type:'get',
                      async:true,
                      timeout:5000,
                      success:function(datas){
                        layer.close(loading);
                        $("#artcontiner").html(datas);
                      },
                      error:function(){
                        layer.close(loading);
                        layer.open({
                                title: '服务器无响应',
                                content: "服务器跑到月球啦！！"
                        })
                      }
                    });
                }
              }
            });

            //搜索
            $("#sreach-btn").click(function(){
              var name= $("#sreachtxt").val();
              var namelen= $("#sreachtxt").val().length;
              if(namelen>0){
                var reg=/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
                if(reg.test(name)==false){
                  layer.msg("请输入中英文或数字！");
                  return
                }
                if(namelen>20){
                  layer.msg("输入的关键字太多啦！");
                  return;
                }
              }
              var urlstr='/article/artclassifylstpage?index=1&classify={{.Param.Classify}}&tag={{.Param.Tag}}&name='+name;
              var loading = layer.msg('加载中...', {icon: 16, shade: 0.3, time:0});
              
              $.ajax({
                  url:urlstr,
                  type:'get',
                  async:true,
                  timeout:5000,
                  success:function(datas){
                    layer.close(loading);
                    $("#artcontiner").html(datas);
                  },
                  error:function(){
                    layer.close(loading);
                    layer.open({
                            title: '服务器无响应',
                            content: "服务器跑到月球啦！！"
                    })
                  }
                });
            });
        });
        
    </script>
</html>
{{end}}
